<template>
	<section>
		<!--start 面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>营销</el-breadcrumb-item>
				<el-breadcrumb-item>商品促销</el-breadcrumb-item>
				<el-breadcrumb-item>新增商品促销</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end 面包屑-->
		<!--start content-->
		<div class="goodsContent goodSupply" ref="goodsContent">
			<div class="order-tab" :class="{border:vue_table_isSelectGoods}">
				<table class="order-tab1" border="0" cellspacing="0" cellpadding="0" width="100%">
					<col width="5%" />
					<col width="10%" />
					<col width="20%" />
					<col width="15%" />
					<col width="10%" />
					<col width="10%" />
					<col width="10%" />
					<col width="10%" />
					<tr class="tab-th">
						<td></td>
						<td>商品编码</td>
						<td>商品名称</td>
						<td>规格</td>
					</tr>

					<tr class="hoverTr" v-for="(item, index) in vue_table_selectGoods">
						<td>
							<span class="order-num">
								{{(index+1)}}
							</span>
							<span class="order-add">
								<em class="iconfont" @click="vue_table_subGoods(index)">&#xe684;</em>
							</span>
						</td>
						<td>{{item.goodsCode}}</td>
						<td>{{item.goodsName}}</td>
						<td>{{item.goodsSkuValue}}</td>
					</tr>

					<tr class="hoverTr">
						<td>
						</td>
						<td colspan="2">
							<template>

								<el-select filterable clearable @change="vue_table_addGoods" v-model="vue_table_selectGoodsVal" placeholder="输入编码/商品名称">
									<el-option :disabled="item.disabled" v-for="(item,index) in vue_table_allGoods" :label="item.goodsName + ' ( '+  item.goodsSkuValue + ' )'" :value="item.goodsCode">
									</el-option>
								</el-select>

							</template>
							<em class="iconfont" style="position: absolute;right: 8px;top: 10px;cursor: pointer;">&#xe607;</em>
						</td>
						<td></td>
					</tr>

					<tr class="dorder-tend">
						<td colspan="4">
							<p>【说明】将对以上每一个商品分别应用促销规则，生成多张促销单。</p>
							<p>多单位商品参与商品促销时，以最小单位计算件数。</span>
							</p>
						</td>
					</tr>
				</table>
			</div>
			<p class="tableInfo_text" :class="{active:!vue_table_isSelectGoods}">商品促销最少需选择1个商品</p>
			<div class="pro-center">
				<el-form :model="saleGoodsPruleData" :rules="vue_rule_rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="促销时间" prop="goodsPruleDate">
						<el-date-picker v-model="saleGoodsPruleData.goodsPruleDate" type="datetimerange" placeholder="选择日期范围">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="阶梯促销">
						<el-checkbox v-model="saleGoodsPruleData.goodsPruleLadder">启用</el-checkbox>
					</el-form-item>
					<el-form-item class="goodsPruleType orderPruleType" label="促销规则">
						<el-radio-group v-model="saleGoodsPruleData.goodsPruleType">
							<el-radio :label="'0'">直降</el-radio>

							<el-form-item class="font12" v-show="saleGoodsPruleData.goodsPruleType=='0'&&!saleGoodsPruleData.goodsPruleLadder">
								订货价统一降至
								<el-input class="dazhe-input" v-model="saleGoodsPruleData.goodsPruleDetail" @blur="vue_goodsPruleDetail_blur($event)" style="width: 80px;"></el-input>
								元
							</el-form-item>

							<el-form-item class="font12" v-for="(item,index) in vue_goodsPruleDetail" key="1" v-show="saleGoodsPruleData.goodsPruleType=='0'&&saleGoodsPruleData.goodsPruleLadder">
								订购数量满
								<el-input class="dazhe-input" @blur="vue_goodsPruleDetail_blur($event,index,'pruleKey')" style="width: 80px;" v-model.trim="item.pruleKey"></el-input>
								，订货价统一降至
								<el-input class="dazhe-input" @blur="vue_goodsPruleDetail_blur($event,index,'pruleVal')" style="width: 80px;" v-model.trim="item.pruleVal"></el-input>
								元
								<i class="el-icon-delete deleteDetail" @click="vue_goodsPruleDetail_delete(index)" v-show="index!=0"></i>
							</el-form-item>

							<span @click="vue_goodsPruleDetail_add" class="add_goodsPruleDetail" v-show="saleGoodsPruleData.goodsPruleType=='0'&&saleGoodsPruleData.goodsPruleLadder"><i class="el-icon-plus"></i>添加区间</span>
							<el-form-item class="marginB10"></el-form-item>


							<el-radio :label="'1'">打折<span style="color: #ccc;">(订货价=原订货价X促销折扣)</span></el-radio>

							<el-form-item class="font12" v-show="saleGoodsPruleData.goodsPruleType=='1'&&!saleGoodsPruleData.goodsPruleLadder">
								在原订货价基础上再打折
								<el-input class="dazhe-input" v-model="saleGoodsPruleData.goodsPruleDetail" @blur="vue_goodsPruleDetail_blur($event)" style="width: 80px;"></el-input>
								%
							</el-form-item>

							<el-form-item class="font12" v-for="(item,index) in vue_goodsPruleDetail" key="2" v-show="saleGoodsPruleData.goodsPruleType=='1'&&saleGoodsPruleData.goodsPruleLadder">
								订购数量满
								<el-input class="dazhe-input" @blur="vue_goodsPruleDetail_blur($event,index,'pruleKey')" style="width: 80px;" v-model.trim="item.pruleKey"></el-input>
								，在原订货价基础上再打折
								<el-input class="dazhe-input" @blur="vue_goodsPruleDetail_blur($event,index,'pruleVal')" style="width: 80px;" v-model.trim="item.pruleVal"></el-input>
								%
								<i class="el-icon-delete deleteDetail" @click="vue_goodsPruleDetail_delete(index)" v-if="index!=0"></i>
							</el-form-item>

							<span @click="vue_goodsPruleDetail_add" class="add_goodsPruleDetail" v-show="saleGoodsPruleData.goodsPruleType=='1'&&saleGoodsPruleData.goodsPruleLadder"><i class="el-icon-plus"></i>添加区间</span>
							<el-form-item class="marginB10"></el-form-item>

							<span style="color: #ff4949;font-size: 12px;position: absolute;">{{vue_info_goodsPruleInfo}}</span>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="客户级别" prop="gradeCodeArr">
						<el-checkbox label="全部级别" :indeterminate="vue_checkbox_indeterminate" v-model="vue_checkbox_allSelect" @change="vue_checkbox_selectAll" class="fl" style="padding-right:18px;"></el-checkbox>
						<el-checkbox-group v-model="saleGoodsPruleData.gradeCodeArr" class="fl" @change="vue_checkbox_select">
							<el-checkbox v-for="item in vue_checkbox_allDate" :label="item.gradeCode" name="type">{{item.gradeName}}</el-checkbox>
						</el-checkbox-group>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="order-deta" :class="{btnBox1:!$store.state.headFold}">
			<el-button @click="save" :disabled="clickBtn" href="javascript:void(0)">保存</el-button>
      <el-button @click="$router.push({path:'/index'})">取消</el-button>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	export default {
		data() {
			var dateRule = (rule, value, callback) => {
				if(!value[0]) {
					return callback(new Error('促销时间不能为空'));
				} else {
					callback();
				}
			};
			var gradeCodeRule = (rule, value, callback) => {
				if(!value.length) {
					return callback(new Error('请至少选择一个客户级别'));
				} else {
					callback();
				}
			};
			return {
				clickBtn:false,                 //请求数据后禁用按钮
				vue_table_selectGoods:[],  //已选中的商品数组
				vue_table_allGoods:[],  //所有商品
				vue_table_selectGoodsVal:"",  //选择的商品
				vue_table_isSelectGoods:false,  //表格是否显示红色边框
				vue_checkbox_allDate: ['VIP1', 'VIP', '普通'], //客户级别的选项
				vue_checkbox_indeterminate: false, //控制全选checkbox样式
				vue_checkbox_allSelect: false, //全选checkbox
				vue_info_goodsPruleInfo: "促销规则不能为空", //促销明细的提示
				vue_goodsPruleDetail: [{ //促销明细的数组
					pruleKey: '',
					pruleVal: ''
				}],
				vue_rule_rules: {
					goodsPruleDate: [{
						required: true,
						validator: dateRule,
						trigger: 'change'
					}],
					gradeCodeArr: [{
						required: true,
						validator: gradeCodeRule,
						trigger: 'change'
					}],
				},
				saleGoodsPruleData: {
					pruleGoods:'',  //商品的goodsCode集
					goodsPruleDate: [], //促销时间
					goodsPruleSdate: '', //促销开始时间
					goodsPruleEdate: '', //促销结束时间
					goodsPruleLadder: false, //促销阶梯是否启用
					goodsPruleType: '0', //促销类型
					goodsPruleDetail: '', //促销明细
					gradeCodeArr: [], //客户级别
					gradeCodeStr: '', //客户级别
				},
			}
		},
		watch: {
			'saleGoodsPruleData.goodsPruleLadder': function(val, oldVal) {
				this.saleGoodsPruleData.goodsPruleDetail='';
				this.vue_goodsPruleDetail = [{
					pruleKey: '',
					pruleVal: ''
				}];
			},
			'saleGoodsPruleData.goodsPruleType': function(val, oldVal) {
				this.vue_goodsPruleDetail = [{
					pruleKey: '',
					pruleVal: ''
				}];
				this.saleGoodsPruleData.goodsPruleDetail='';
			},
		},
		methods: {
			query_saleGoodsData(){  //请求所有商品data
				this.axios({
					method:"POST",
					url:"/v3/sale/goodss/listAll",
					data:{}
				}).then((res)=>{
					this.vue_table_allGoods=res.data.list;
					this.vue_table_allGoods.forEach((item,index,arr)=>{
						item.disabled=false;
					})
				}).catch((err)=>{
					//接口请求失败
				})
			},
			query_saleGodds(goodsCode,arr){  //请求单个商品
				this.axios({
					method:"GET",
					url:"/v3/sale/goodss/"+goodsCode
				}).then((res)=>{
					arr.push(res.data.list[0]);
					this.vue_table_allGoods.forEach((item,index,arr)=>{
						if(item.goodsCode==goodsCode){
							item.disabled=true;
						}
					})
				}).catch((err)=>{
					this.Public.openError(this,err.response.data)
				})
			},
			query_gradeDate() {  //请求客户级别
				this.axios({
					method: "POST",
					url: "/v3/member/grades/listAll",
					data: {}
				}).then((res) => {
					this.vue_checkbox_allDate = res.data.list;
				}).catch((err) => {
					this.Public.openError(this, err.response.data)
				})
			},


			vue_table_addGoods(val){  //加商品
				if(val){
					this.query_saleGodds(val,this.vue_table_selectGoods);
					this.vue_table_selectGoodsVal="";
					this.vue_table_isSelectGoods=false;
				}
			},
			vue_table_subGoods(index){  //减商品
				let goodsCodeStr = this.vue_table_selectGoods[index].goodsCode
				this.vue_table_allGoods.forEach((item,index,arr)=>{
						if(item.goodsCode==goodsCodeStr){
							item.disabled=false;
						}
				})
				this.vue_table_selectGoods.splice(index,1);
				this.vue_table_isSelectGoods=!this.vue_table_selectGoods.length;
			},


			vue_goodsPruleDetail_add() { //加促销明细
				this.vue_goodsPruleDetail.push({
					pruleKey: '',
					pruleVal: ''
				});
			},
			vue_goodsPruleDetail_delete(index) { //删除促销明细
				this.vue_goodsPruleDetail.splice(index, 1);
				this.vue_goodsPruleDetail_rule();
			},
			vue_isRepeat(arr){  //数组判重
				let b = false;
				let newArr = arr.sort();
				for(var i=0,len=newArr.length;i<len;i++){
					if(newArr[i]==newArr[i+1]){
						b=true;
					}
				}
				return b;
			},
			vue_isNull(arr){  //数组item判空
				let b = false;
				for(var i=0,len=arr.length;i<len;i++){
					if(arr[i]===''){
						b=true;
					}
					break;
				}
				return b;
			},
			vue_goodsPruleDetail_rule() { //促销明细非空校验
				if(this.saleGoodsPruleData.goodsPruleLadder){
					let newArrKey=[],newArrVal=[];
					this.vue_goodsPruleDetail.forEach((item,index,arr)=>{
						newArrKey.push(item.pruleKey);
						newArrVal.push(item.pruleVal);
					})
					if(this.vue_isRepeat(newArrKey)){
						this.vue_info_goodsPruleInfo = '区间不能重复';
					}else{
						if(this.vue_isNull(newArrKey)||this.vue_isNull(newArrVal)){
							this.vue_info_goodsPruleInfo = '请完善促销规则';
						}else{
							this.vue_info_goodsPruleInfo = '';
						}
					}
				}else{
					if(this.saleGoodsPruleData.goodsPruleDetail) {
						this.saleGoodsPruleData.goodsPruleDetail = parseFloat(this.saleGoodsPruleData.goodsPruleDetail)?parseFloat(this.saleGoodsPruleData.goodsPruleDetail) : 1;
						this.vue_info_goodsPruleInfo='';
					}else{
						this.vue_info_goodsPruleInfo = '请完善促销规则';
					}
				}
			},
			vue_goodsPruleDetail_blur(el,index,Key){
				if(!!Key){
					if(!!el.target._value){
						this.vue_goodsPruleDetail[index][Key] = parseFloat(el.target._value) ? parseFloat(el.target._value) : 1;
					}
				}else{
					if(!!el.target._value){
						this.saleGoodsPruleData.goodsPruleDetail = parseFloat(el.target._value) ? parseFloat(el.target._value) : 1;
					}
				}
				this.vue_goodsPruleDetail_rule();
			},

			vue_checkbox_selectAll(e) { //全选checkbox
				if(e.target.checked) {
					this.vue_checkbox_allDate.forEach((item, index, arr) => {
						this.saleGoodsPruleData.gradeCodeArr.push(item.gradeCode)
					})
				} else {
					this.saleGoodsPruleData.gradeCodeArr = []
				}
				this.vue_checkbox_indeterminate = false;
			},
			vue_checkbox_select(value) { //全选
				let checkedCount = value.length;
				this.vue_checkbox_allSelect = checkedCount === this.vue_checkbox_allDate.length;
				this.vue_checkbox_indeterminate = checkedCount > 0 && checkedCount < this.vue_checkbox_allDate.length;
			},


			save() { //新增商品促销
				this.vue_goodsPruleDetail_rule();
				this.vue_table_isSelectGoods=!this.vue_table_selectGoods.length;
				this.saleGoodsPruleData.pruleGoods='';
				this.$refs['ruleForm'].validate((valid) => {
					if(valid && this.vue_info_goodsPruleInfo == ""&&!this.vue_table_isSelectGoods) {
						this.vue_table_selectGoods.forEach((item,index,arr)=>{  //把商品的goodsCode用逗号拼接起来，
							this.saleGoodsPruleData.pruleGoods += item.goodsCode+',';
						})
						this.saleGoodsPruleData.goodsPruleSdate = this.saleGoodsPruleData.goodsPruleDate[0];  //取开始时间
						this.saleGoodsPruleData.goodsPruleEdate = this.saleGoodsPruleData.goodsPruleDate[1];  //取结束时间
						if(this.saleGoodsPruleData.goodsPruleLadder){  //判断是否启用了促销阶梯
							this.saleGoodsPruleData.goodsPruleDetail='';
							this.vue_goodsPruleDetail.forEach((item, index, arr) => {
								this.saleGoodsPruleData.goodsPruleDetail += item['pruleKey'] + ":" + item['pruleVal'] + ","
							})
						}
						this.saleGoodsPruleData.gradeCodeStr='';
						this.saleGoodsPruleData.gradeCodeArr.forEach((item, index, arr) => {  //把客户级别的code拼接起来
							this.saleGoodsPruleData.gradeCodeStr += item + ','
						})
						this.clickBtn=!this.clickBtn;
						this.axios({  //请求save接口
							method: "post",
							url: "/v3/sale/goodsPrules/batchSaveGoodsAndPrule",
							data: {
								"pruleGoods": this.saleGoodsPruleData.pruleGoods,
								"goodsPruleSdate": this.saleGoodsPruleData.goodsPruleSdate,
								"goodsPruleEdate": this.saleGoodsPruleData.goodsPruleEdate,
								"goodsPruleLadder": Number(!this.saleGoodsPruleData.goodsPruleLadder) + "",
								"goodsPruleType": this.saleGoodsPruleData.goodsPruleType,
								"goodsPruleDetail": this.saleGoodsPruleData.goodsPruleDetail,
								"gradeCodeStr": this.saleGoodsPruleData.gradeCodeStr
							}
						}).then((res) => {
							this.clickBtn=!this.clickBtn;
							this.Public.openSuccess(this, "操作成功！")
							this.$router.push({path:'/marketing/saleGoodsPruleList'})
						}).catch((err) => {
							this.clickBtn=!this.clickBtn;
							this.Public.openError(this, err.response.data)
						})


					}
				})
			},
		},
		created() {
			this.query_saleGoodsData();  //请求所有商品data
			this.query_gradeDate();  //请求客户级别
		},
		mounted() {
			this.$refs['goodsContent'].style.height = (document.documentElement.clientHeight - 109) + 'px';
		}
	}
</script>

<style scoped>
	* {
		transition: .2s;
		box-sizing: border-box;
	}

	section {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	div.location {
		flex: 0 0 10px;
		padding: 3px 0 15px 0;
	}

	div.goodsContent {
		position: relative;
		width: 100%;
		background-color: #fff;
		padding: 0 20px 20px 0px;
		margin-top: 15px;
		overflow-y:auto;
	}
	.order-deta {
		position: absolute;
		bottom: 10px;
		left:180px;
		width:calc(100% - 190px);
		height: 50px;
		padding-top:10px;
		padding-left:30px;
		background: #fff;
		z-index: 100;
		clear: both;
	}
	.order-deta.btnBox1 {
		left:98px;
		width:calc(100% - 108px);
	}
	.order-deta span {
		margin-right: 10px;
	}

	.order-deta a {
		display: inline-block;
		width: 80px;
		height: 32px;
		text-align: center;
		line-height: 31px;
		border-radius: 20px;
		border: 1px solid #cdd9e6;
	}

	.order-deta a:first-child {
		background: rgb(19, 193, 159);
		color: #fff;
		border: 0;
		height: 32px;
		line-height: 32px;
	}

	.pro-center {
		margin-top: 20px;
	}

	.deleteDetail {
		margin-left: 15px;
		cursor: pointer;
		font-size: 14px;
	}

	.deleteDetail:hover {
		color: #13C19F;
	}

	.add_goodsPruleDetail {
		display: inline-block;
		padding: 5px 5px 5px 20px;
		font-size: 12px;
		color: #13C19F;
		cursor: pointer;
	}

	.add_goodsPruleDetail i.el-icon-plus {
		display: inline-block;
		margin-right: 5px;
	}

	.marginB10 {
		margin-bottom: 10px;
	}
	.order-tab{
		margin: 30px 30px 16px;
		border-left: 1px solid #e7e9f1;
	}
	.order-tab1 td{
		text-align: center;
		padding: 0px 0;
		border: 1px solid #e7e9f1;
		border-top: 0;
		border-left:0;
		position: relative;
	}
	.order-tab1 td img{
		width: 45px;
		margin: 0 auto;
	}
	.order-tab1 .tab-th td{
		background: #eff1f8;
		padding: 14px 0;
	}
	.order-tab1 .order-input1{
		height: 34px;
		width: 100px;
		border: 1px solid #cdd9e6;
		border-radius:4px ;
		text-align: center;
	}
	.dorder-td td{
		padding: 15px 0;
	}
	.dorder-tend td{
		padding: 12px 15px;
		text-align: left;
	}
	.dorder-tend p span{
		display: inline-block;
		width: 120px;
	}
	.dorder-tend p:last-child span{
		color: #f33333;
		font-size: 20px;
	}
	.dorder-tend p {
		margin-top: 0px;
		color: #96a6b6;
		margin-left: 10px;
	}
	.hoverTr:hover .order-num {
		display: none;
	}

	.hoverTr:hover .order-add {
		display: inline-block;
	}
	.hoverTr td{
		height: 54px;
		padding: 0;
	}
	.order-add{
		display: none;
	}
	.order-add em{
		cursor: pointer;
	}
	.hoverTr:hover .order-num {
		display: none;
	}

	.hoverTr:hover .order-add {
		display: inline-block;
	}

	.border{
		border:1px solid #f96868;
	}
	.tableInfo_text{
		margin-left:30px;
		color:#f96868;
	}
	.tableInfo_text.active{
		color:rgba(0,0,0,0);
	}
</style>
